<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="9">
        <el-card
          class="box-construction"
          shadow="always"
          v-loading="loading"
          :style="`height:${Height}px`"
        >
          <div class="box-title box-title-position">
            <div>员工排名</div>
            <el-date-picker
              v-model="month"
              type="month"
              placeholder="选择月"
              value-format="yyyy-MM"
              @change="changeDate"
              style="width: 70%; position: absolute; right: 0; top: -7px"
            />
          </div>
          <el-tree
            empty-text="暂无数据"
            ref="asyncTree"
            check-strictly
            highlight-current
            :default-expanded-keys="defaultExpandId"
            :data="data"
            :props="treeDefaultProps.defaultProps"
            :expand-on-click-node="false"
            node-key="id"
            @node-click="handleNodeClick"
            :style="`width: 100%;margin-top:30px;min-height:100px;max-height:${
              Height - 100
            }px;overflow: auto;`"
          ></el-tree>
        </el-card>
      </el-col>
      <el-col :span="15">
        <el-card
          class="box-construction"
          shadow="always"
          v-loading="peoloading"
          :style="`height:${Height}px`"
        >
          <el-table
            size="small"
            :show-header="true"
            :data="tableData"
            :max-height="`${Height - 60}`"
            style="width: 100%"
          >
            <el-table-column
              prop="name"
              label="姓名"
              width="150"
            ></el-table-column>
            <el-table-column prop="totalScore" label="分数"></el-table-column>
            <!-- <el-table-column prop="avgScore" label="部门平均分"></el-table-column> -->
            <el-table-column prop="mom" label="上月环比">
              <template slot-scope="scope">
                <div v-if="scope.row.mom == null">--</div>
                <div v-if="scope.row.mom == 0">0</div>
                <div v-if="scope.row.mom != null && scope.row.mom != 0">
                  {{ scope.row.mom }}
                  <i
                    :class="`${
                      scope.row.mom > 0
                        ? 'el-icon-top red'
                        : 'el-icon-bottom blue'
                    }`"
                  />
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="order"
              label="排名"
              width="100"
            ></el-table-column>
            <el-table-column label="年度走势" width="100">
              <template slot-scope="scope">
                <i
                  class="el-icon-s-marketing echarts-link"
                  @click="checkDatas(scope.row)"
                />
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <CheckEcharts
      v-if="visible"
      ref="editForm"
      :title="formTitle"
      :datas.sync="editRow"
      :visible.sync="visible"
    />
  </div>
</template>

<script>
import orgAPI from "@apis/organize";
import staNewAPI from "@apis/statisticsNew";
import CheckEcharts from "./checkEcharts/index";
import { mapState } from "vuex";
export default {
  data() {
    return {
      month: "", //当前月份
      loading: false,
      peoloading: false,
      data: [],
      treeDefaultProps: {
        defaultProps: {
          children: "children",
          label: "orgname",
        },
        defaultExpanded: [1],
      },
      curOrgid: "",
      tableData: [],
      currentMonth: "",
      visible: false,
      formTitle: "参与项目绩效详情",
      editRow: {},
    };
  },
  components: { CheckEcharts },
  computed: {
    ...mapState({
      userInfo: "auth",
    }),
    Height() {
      return document.documentElement.clientHeight - 110;
    },
    defaultExpandId() {
      if (this.data.length) {
        return [this.data[0].id];
      } else {
        return [""];
      }
    },
  },
  created() {
    this.loading = true;
    let date = new Date();
    let Year = date.getFullYear();
    let Day =
      date.getMonth() + 1 < 10
        ? `0${date.getMonth() + 1}`
        : date.getMonth() + 1;
    this.month = `${Year}-${Day}`;
    this.currentMonth = `${Year}-${Day}`;
    this.getTree();
  },
  mounted() {},
  methods: {
    //获取树状图结构
    getTree() {
      let parmars =
        this.currentMonth === this.month
          ? {}
          : {
              month:
                new Date(
                  new Date(this.month).format("yyyy-MM-dd 00:00:00")
                ).getTime() / 1000,
            };
      staNewAPI
        .getOrgAll(parmars)
        .then((res) => {
          // console.log(res, "res");
          this.loading = false;
          this.data = [...res];
          if (this.data.length === 1 && !this.data[0].children) {
            this.curOrgid = this.data[0].id;
            this.peoloading = true;
            this.getPeopleList(this.data[0].id);
          }
          this.$nextTick(() => {
            this.$refs.asyncTree.setCurrentKey(this.curOrgid);
          });
          // this.data = [...res[0].children];
        })
        .catch((err) => {
          this.data = [];
          const errLog = err.response ? err.response.data.message : err.message;
          this.loading = false;
          this.$message.error(errLog);
        });
    },
    //月份选择
    changeDate(val) {
      this.month = val;
      if (this.curOrgid) {
        this.peoloading = true;
        this.getPeopleList(this.curOrgid);
      }
      this.getTree();

      // } else {
      //   this.$message.warning("请选择部门");
      // }
    },
    handleNodeClick(data, node, nodeSelf) {
      this.peoloading = true;
      // this.tableData = [];
      this.curOrgid = data.id;
      this.getPeopleList(data.id);
    },
    //组织人员列表
    getPeopleList(val) {
      let parmars = {
        orgid: val,
        month: this.month,
      };
      staNewAPI
        .getStatisticShoworder(parmars)
        .then((res) => {
          // console.log(res, "res");
          this.tableData = [...res];
          this.peoloading = false;
        })
        .catch((err) => {
          console.log(err, "erreee");
          this.tableData = [];
          this.peoloading = false;
          this.$message.error(err.message);
        });
    },
    //弹窗查看年度季度走势
    checkDatas(row) {
      this.formTitle = `${row.name}的个人绩效总览（${this.month.slice(
        0,
        4
      )}年）`;
      this.editRow = {
        uid: row.uid,
        year: this.month.slice(0, 4),
      };
      this.visible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.box-title-position {
  position: relative;
}
.custom-tree-node {
  font-size: 14px;
  display: flex;
  align-items: center;
  width: 100%;
  & > span:nth-child(1) {
    flex: 2;
  }
}
.btn-box {
  text-align: right;
  padding-top: 30px;
}
.echarts-link {
  font-size: 20px;
  color: #4598f0;
  cursor: pointer;
}
.red {
  color: #ea5e56;
  font-size: 15px;
  padding-left: 5px;
}
.blue {
  color: #4598f0;
  font-size: 15px;
  padding-left: 5px;
}
</style>